import {
    DesktopOutlined,
    FileOutlined,
    PieChartOutlined,
    TeamOutlined,
    UserOutlined,
} from '@ant-design/icons';
import {Link} from "react-router-dom";
import React, {useState} from "react";
import {Menu} from "antd";
import {Layout} from "antd";
import "./Menus.css"
const {Sider} = Layout
function getItem(label, key, icon, children)   {
    return {
        key,
        icon,
        children,
        label
    };
}
const items = [
    getItem(<Link to="/" >考试系统</Link>, '1', <PieChartOutlined />),
    getItem(<Link to="/users" >用户管理</Link>, '2', <DesktopOutlined />),
    getItem(<Link to="/questions" >考试题库</Link>, '6', <UserOutlined />, [
        getItem(<Link to="/questions/single" >单选</Link>, '3'),
        getItem(<Link to="/questions/multiple" >多选</Link>, '4'),
        getItem(<Link to="/questions/subjective" >主观题</Link>, '5'),
    ]),
    getItem(<Link to="/test" >考试管理</Link>, '7', <TeamOutlined />),
    getItem('Files', '8', <FileOutlined />),
];
function Menus(){
    const [collapsed,setCollapsed]=useState(false)
    return(
        <Sider collapsible collapsed={collapsed} onCollapse={(value) => setCollapsed(value)}>
            <div className="demo-logo-vertical" />
            <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline"  items={items} />
        </Sider>
    )
}
export default Menus